import { useState, useEffect, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Space, Table } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
// import { message } from 'antd';
import { getUser, getUserList } from "@/services/ant-design-pro/api"
export type TableList = {
    key: string;
    id: string;
    email: string;
    name: string;
    status: string;
    role: string;
    createAt: string;
};

// import { PageContainer } from '@ant-design/pro-layout'

import './index.css'

const columns: ProColumns<TableList>[] = [
    {
        title: '账户',
        width: 80,
        dataIndex: 'name',
        align: 'left',
        render: (_) => <a>{_}</a>,
    },
    {
        title: '邮箱',
        dataIndex: 'email',
        align: 'left',
    },
    {
        title: '角色',
        align: 'left',
        dataIndex: 'role',
        onFilter: true,
        valueType: 'select',
        valueEnum: {
            admin: {
                text: '管理员',
                role: 'admin',
            },
            visitor: {
                text: '访客',
                role: 'visitor',
            },
        },
    },

    {
        title: '状态',
        dataIndex: 'status',
        onFilter: true,
        valueType: 'select',
        valueEnum: {
            locked: { text: '锁定', color: 'yellow' },
            active: {
                text: '可用',
                status: 'success',
            }
        },
        align: 'left',
    },
    {
        title: '注册日期',
        dataIndex: 'createAt',
        valueType: "date",
        hideInSearch: true,
        align: 'left',
    },
    {
        title: '操作',
        key: 'option',
        valueType: 'option',
        align: 'left',
        fixed: 'right',
        render: (_, record) => [<a key="one" onClick={Locked}>{record.status === "locked" ? "启用" : "禁用"}</a>, <a key="two">{record.role === "admin" ? "解除授权" : "授权"}</a>],
    },
];

//修改启用和禁用
function Locked() {
    //   alert('修改启用和禁用');
    getUser().then(res => {
        console.log(res);

    })
}

// //修改授权与解除授权
// function Roled(){
//     alert('修改授权与解除授权');
// }


const userManagement = () => {
    const [tableList, setTableList] = useState([] as TableList[]);

    //拿到要修改的数据
    const [datd, setDatd] = useState([] as any);
    console.log(datd + "datd");

    const actionRef = useRef();

    //数据渲染
    useEffect(() => {
        getUserList().then(res => {
            setTableList(res[0]);
            console.log(res);
        })
    }, [])


    //点击启用
    function To_enable() {
        console.log(666666666666666666);
    }


    return (
        <div className="box">
            <PageContainer>
                <ProTable<TableList>
                    columns={columns}
                    actionRef={actionRef}
                    
                    rowSelection={{
                        selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
                    }}
                    //请求数据接口
                    request={async (params = {}, sort, filter) => {
                        // console.log(params);
                        const { current: page, pageSize } = params;
                        const data = await getUserList({
                            params: {
                                page: page,
                                pageSize: pageSize,
                            },
                        });

                        // console.log(data);
                        // 拿到数据
                        // setTableList(data[0]);
                        // 返回数据                 
                        return { data: data[0], total: data[1] };
                    }}

                    rowKey="key"
                    search={{
                        labelWidth: 'auto',
                    }}
                    onSubmit={(value) => {
                        getUserList(value).then((res) => {
                            console.log(value, res[0]);

                            setTableList(res[0]);
                        })
                    }}
                    onReset={() => {
                        getUserList().then((res) => {
                            setTableList(res[0]);
                        })
                    }}
                    pagination={{
                        pageSize: 5,
                    }}
                    dateFormatter="string"
                    tableAlertRender={() => (
                        <Space size={24}>
                            <span>
                                <Button onClick={To_enable}>启用</Button>
                            </span>
                            <span>
                                <Button>禁用</Button>
                            </span>
                            <span>
                                <Button>解除授权</Button>
                            </span>
                            <span>
                                <Button>授权</Button>
                            </span>
                        </Space>
                    )}
                    dataSource={tableList}
                    scroll={{ x: 130 }}
                    onRow={record => {
                        return {
                            onClick: event => {
                                console.log('====================================');
                                console.log(record);
                                setDatd(record.id);
                                console.log('====================================');

                            }, // 点击行
                        };
                    }} />
            </PageContainer>
        </div>
    )
}
export default userManagement